// 商品分类
import { setInterval } from 'timers';
<template>
  <div>

    <Row class="page">
      <Col span="24" gutter="10">
      <Modal v-model="modelDel" title="提醒" @on-ok="delok" @on-cancel="delcancel">
        <p>是否进行退款，点击确定退款，点击取消不退款！</p>
      </Modal>
      <Col span="8" style="">
      <Card :bordered="true" style="padding-bottom:30px;">
        <p slot="title">订单号查询</p>
        <Col span="20" style="padding-right:10px;">
        <Input v-model="ordergroupOrder" placeholder="订单号"></Input>
        </Col>
        <Col span="4">
        <Button type="primary" long @click.stop="orderBtn">查询</Button>
        </Col>
      </Card>
      </Col>
      <Col span="8" style="padding-left:10px;">
      <Card :bordered="true" style="padding-bottom:30px;">
        <p slot="title">姓名查询</p>
        <Col span="20" style="padding-right:10px;">
        <Input v-model="orderusername" placeholder="姓名"></Input>
        </Col>
        <Col span="4">
        <Button type="primary" long @click.stop="usernameBtn">查询</Button>
        </Col>
      </Card>
      </Col>
      <Col span="8" style="padding-left:10px;">
      <Card :bordered="true" style="padding-bottom:30px;">
        <p slot="title">电话查询</p>
        <Col span="20" style="padding-right:10px;">
        <Input v-model="ordertel" placeholder="电话号"></Input>
        </Col>
        <Col span="4">
        <Button type="primary" long @click.stop="telBtn">查询</Button>
        </Col>
      </Card>
      </Col>
      </Col>
    </Row>
    <br>
    <Row>
      <Col span="24">
      <Tabs value="name1" @on-click="click">
        <TabPane :label="label" name="name1">
          <Row>
            <Col span="24">
            <Table border :columns="columns7" :data="data6"></Table>

            </Col>
          </Row>
        </TabPane>
        <TabPane label="已付款" name="name2">
          <Col span="24">
          <Table border :columns="columns7" :data="data6"></Table>

          </Col>
        </TabPane>
        <TabPane label="已发货" name="name3">
          <Col span="24">
          <Table border :columns="columns7" :data="data6"></Table>

          </Col>
        </TabPane>
        <TabPane label="已收货" name="name4">
          <Col span="24">
          <Table border :columns="columns7" :data="data6"></Table>

          </Col>
        </TabPane>
        <!-- <TabPane label="已退款" name="name5">
          <Col span="24">
          <Table border :columns="columns7" :data="data6"></Table>
          </Col>
        </TabPane> -->
      </Tabs>
      <!-- <Page :total="100" @on-change="pages" /> -->
      </Col>
    </Row>
    <Modal v-model="modal2" title="订单详情">
      <Form ref="orderInfo" id="dy" :model="orderInfo" :label-width="80">

        <FormItem label="订单号 :">

          <p>{{orderInfo.group_order}}</p>

        </FormItem>
        <FormItem label="订单时间 :">
          <p>{{orderInfo.create_datetime}}</p>
        </FormItem>
        <FormItem label="收货人">
          <p>{{ConsigneeInfo.consignee_name}}</p>
        </FormItem>
        <FormItem label="收货人电话">
          <p>{{ConsigneeInfo.tel}}</p>
        </FormItem>
        <FormItem label="收货地址">
          <p>{{ConsigneeInfo.province}} {{ConsigneeInfo.city}} {{ConsigneeInfo.county}} {{ConsigneeInfo.address}}</p>
        </FormItem>
        <FormItem label="配送方式 :">
          <p>{{orderInfo.delivery_mode}}</p>
        </FormItem>
        <FormItem label="用户留言 :">
          <p>{{orderInfo.remarks}}</p>
        </FormItem>
        <FormItem label="商品信息 :">
          <div v-for="item in goodsItems" :key="item.id">
            <p>{{item.name}}</p>
            <Row>
              <Col span="24">
              <p>数量:{{item.number}} | 规格:{{item.spec_name}} | 单价:{{item.price}}</p>
              </Col>
              <!-- <Col span="24">
              <p>规格:{{item.spec_name}}</p>
              </Col>
              <Col span="24">
              <p></p>
              </Col> -->
            </Row>
          </div>
        </FormItem>
        <FormItem label="订单金额:">
          <p>{{orderInfo.price}}</p>
        </FormItem>
         <img :src="orderimg" style="width:100%;" alt="">
      </Form>
      <div slot="footer">
        <Row>
          <Col span="18" offset="6">
          <div v-if="orderInfo.order_status == 0"> 
            <!-- <Button type="warning" @click.stop="fh(orderInfo.group_order)">确认发货</Button>
            <Button type="info" v-print="'#dy'">打印订单</Button> -->
            <Button type="error" @click="ok">取消</Button>
          </div>
          <div v-if="orderInfo.order_status == 1">
            <Button type="warning" @click.stop="fh(orderInfo.group_order)">确认发货</Button>
            <Button type="info" v-print="'#dy'">打印订单</Button>
            <Button type="error" @click="ok">取消</Button>
          </div>
                  <div v-if="orderInfo.order_status == 2">
            <!-- <Button type="warning" @click.stop="fh(orderInfo.group_order)">确认发货</Button> -->
            <Button type="info" v-print="'#dy'">打印订单</Button>
            <Button type="error" @click="ok">取消</Button>
          </div>
                  <div v-if="orderInfo.order_status == 3">
            <!-- <Button type="warning" @click.stop="fh(orderInfo.group_order)">确认发货</Button> -->
            <Button type="info" v-print="'#dy'">打印订单</Button>
            <Button type="error" @click="ok">取消</Button>
          </div>
                            <div v-if="orderInfo.order_status == 5">
            <!-- <Button type="warning" @click.stop="fh(orderInfo.group_order)">确认发货</Button> -->
            <Button type="info" v-print="'#dy'">打印订单</Button>
            <Button type="error" @click="ok">取消</Button>
          </div>

          </Col>
        </Row>
      </div>
    </Modal>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  data() {
    return {
          orderimg:ORDER_IMG,
      modelDel: false,
      delOrderId: "",
      orderid: {},
      modal3: false,
      ConsigneeInfo: {},
      order: "0",
      orderInfo: {},
      modal1: false,
      modal2: false,
      pageNumber: 1,
      tabsName: "name1",
      label: h => {
        return h("div", [h("span", "全部订单")]);
      },
      columns7: [
        {
          title: "订单号",
          key: "group_order",
          width: 100
        },
        {
          title: "商品名称",
          key: "goods_name",
          width: 150,
          align: "center",
          render: (h, params) => {
            return h("div", [h("strong", params.row.goods_name)]);
          }
        },
        {
          title: "订单状态",
          key: "order_status",
          width: 110,
          sortable: true,
          align: "center",
          render: (h, params) => {
            if (params.row.order_status == 9) {
              return "已删除";
            }
            if (params.row.order_status == 1) {
              return "已付款";
            }
            if (params.row.order_status == 0) {
              return "未支付";
            }
            if (params.row.order_status == 2) {
              return "已发货";
            }
            if (params.row.order_status == 3) {
              return "已收货";
            }
            if (params.row.order_status == 5) {
              return "已退款";
            }
          }
        },
        {
          title: "配送方式",
          key: "delivery_mode",
          sortable: true,
          width: 110,
          align: "center"
        },
        {
          title: "订单金额",
          key: "price",
          width: 110,
          align: "center",
          sortable: true
        },
        {
          title: "收货人",
          key: "consignee_name",
          width: 110,
          sortable: true,
          align: "center"
        },
        {
          title: "收货人电话",
          key: "tel",
          width: 120,
          sortable: true
        },
        {
          title: "备注",
          key: "remarks",
          sortable: true
        },
        {
          title: "下单时间",
          key: "create_datetime",
          width: 150
        },
        {
          title: "配送地址",
          key: "number",
          sortable: true,
          render: (h, params) => {
            return (
              params.row.province +
              " | " +
              params.row.city +
              " | " +
              params.row.county +
              " | " +
              params.row.address
            );
          }
        },
        {
          title: "操作",
          key: "caozuo",
          width: 200,
          align: "center",
          render: (h, params) => {
            let _self = this;
            console.log(_self.tabsName);
            if (params.row.order_status == 5 || params.row.order_status == 0) {
              return h("div", [
                h(
                  "Button",
                  {
                    style: {
                      marginLeft: "10px"
                    },
                    props: {
                      type: "primary",
                      size: "small"
                    },
                    on: {
                      click: e => {
                        let _self = this;
                        this.modal2 = true;
                        console.log(params.index);
                        $.ajax({
                          url: BASE_URL + "ordermanagement/groupActivityDetail",
                          type: "get",
                          data: {
                            groupOrder: params.row.group_order
                          },
                          success: function(data) {
                            let goodsItems = data.goods_items;
                            _self.goodsItems = JSON.parse(goodsItems);
                            console.log(_self.goodsItems);
                            console.log(_self.data6[params.index]);
                            _self.ConsigneeInfo = _self.data6[params.index];
                            _self.orderInfo = data;
                          }.bind(this)
                        });
                      }
                    }
                  },
                  "详情"
                )
              ]);
            } else {
              return h("div", [
                h(
                  "Button",
                  {
                    style: {
                      marginLeft: "10px"
                    },
                    props: {
                      type: "primary",
                      size: "small"
                    },
                    on: {
                      click: () => {
                        let _self = this;
                      let datas = {
                          out_trade_no: params.row.group_order,
                          all_total_fee: Math.round(params.row.price * 100),
                          refund_fee: Math.round(params.row.price * 100)
                        };
            _self.delOrderId = datas
            _self.modelDel = true
                      }
                    }
                  },
                  "退款"
                ),
                h(
                  "Button",
                  {
                    style: {
                      marginLeft: "10px"
                    },
                    props: {
                      type: "primary",
                      size: "small"
                    },
                    on: {
                      click: e => {
                        let _self = this;
                        this.modal2 = true;
                        console.log(params.index);
                        $.ajax({
                          url: BASE_URL + "ordermanagement/groupActivityDetail",
                          type: "get",
                          data: {
                            groupOrder: params.row.group_order
                          },
                          success: function(data) {
                            let goodsItems = data.goods_items;
                            _self.goodsItems = JSON.parse(goodsItems);
                            console.log(_self.goodsItems);
                            console.log(_self.data6[params.index]);
                            _self.ConsigneeInfo = _self.data6[params.index];
                            _self.orderInfo = data;
                          }.bind(this)
                        });
                      }
                    }
                  },
                  "详情"
                )
              ]);
            }
          }
        }
      ],
      data6: [],
      goodsItems: "",
      value: "",
      ordergroupOrder: "",
      orderusername: "",
      ordertel: "",
      orderdate: "",
      pages: ""
    };
  },
  created() {
    this.allOrder(
      this.ordergroupOrder,
      this.orderusername,
      this.ordertel,
      this.orderdate
    );

    let _self = this;
    // setInterval(function() {
    //   _self.yfOrdesr();
    // }, 2000);
  },
  methods: {
    delWork: function(orderid) {
      let _self = this;
      $.ajax({
        url: BASE_URL + "ordermanagement/refund",
        type: "get",
        data: orderid,
        success: function(data) {
          if (data) {
            if (_self.tabsName == "name1") {
              // console.log(e);
              _self.allOrders();
            }
            if (_self.tabsName == "name2") {
              // console.log(e);
              _self.yfOrder();
            }
            if (_self.tabsName == "name3") {
              // console.log(e);
              _self.yfhOrder();
            }
            if (_self.tabsName == "name4") {
              // console.log(e);
              _self.yshOrder();
            }
            _self.$Message.success("退款成功");
          } else {
            _self.$Message.error("退款失败");
          }
        }.bind(this)
      });
    },
    delok: function() {
      let _self = this;
      _self.delWork(this.delOrderId);
    },
    delcancel: function() {},
    time(title, content) {
      this.$Notice.open({
        title: title,
        desc: content,
        duration: 100
      });
    },
    // pages: function(e) {
    //   _self.pages = e;
    //   let _self = this;
    //   if (_self.tabsName == "name1") {
    //     _self.allOrders();
    //   }
    //   if (_self.tabsName == "name2") {
    //     _self.yfOrder();
    //   }
    //   if (_self.tabsName == "name3") {
    //     _self.yfhOrder();
    //   }
    //   if (_self.tabsName == "name4") {
    //     _self.yshOrder();
    //   }
    // },
    fh: function(e) {
      console.log(e);
      let _self = this;
      $.ajax({
        url: BASE_URL + "ordermanagement/collectGoods",
        type: "get",
        data: {
          groupOrder: e
        },
        success: function(data) {
          console.log(_self.tabsName);
          if (data) {
            _self.modal2 = false;
            let e = _self.tabsName;
            if (e == "name1") {
              console.log(e);
              _self.allOrders();
            }
            if (e == "name2") {
              console.log(e);
              _self.yfOrder();
            }
            if (e == "name3") {
              console.log(e);
              _self.yfhOrder();
            }
            if (e == "name4") {
              console.log(e);
              _self.yshOrder();
            }
          } else {
            _self.$Message.error("已经发货");
            _self.modal2 = false;
          }
        }.bind(this)
      });
    },
    orderBtn() {
      console.log(this.ordergroupOrder);
      this.allOrder(this.ordergroupOrder, "", "", "");
    },
    usernameBtn() {
      this.allOrder("", this.orderusername, "", "");
    },
    telBtn() {
      this.allOrder("", "", this.ordertel, "");
    },
    allOrder(ordergroupOrder, orderusername, ordertel, orderdate) {
      let _self = this;
      $.ajax({
        url: BASE_URL + "ordermanagement/cartAll",
        type: "get",
        data: {
          groupOrder: ordergroupOrder,
          username: orderusername,
          tel: ordertel,
          date: orderdate
        },
        success: function(e) {
          console.log(e);
          _self.data6 = [];
          _self.data6 = e;
        }.bind(this)
      });
    },
    allOrders() {
      let _self = this;
      $.ajax({
        url: BASE_URL + "ordermanagement/cartAll",
        type: "get",
        data: {
          groupOrder: "",
          username: "",
          tel: "",
          date: ""
        },
        success: function(e) {
          console.log(e);
          _self.data6 = [];
          _self.data6 = e;
        }.bind(this)
      });
    },
    yfOrder() {
      let _self = this;
      $.ajax({
        url: BASE_URL + "ordermanagement/cartByYF",
        type: "get",
        data: {
          groupOrder: "",
          username: "",
          tel: "",
          date: ""
        },
        success: function(e) {
          console.log(e);
          _self.data6 = [];
          if (Boolean(e)) {
            _self.data6 = e;
          } else {
            _self.data6 = [];
          }
        }.bind(_self)
      });
    },
    yfOrdesr() {
      //
      let _self = this;
      $.ajax({
        url: BASE_URL + "ordermanagement/cartByYF",
        type: "get",
        data: {
          groupOrder: "",
          username: "",
          tel: "",
          date: ""
        },
        success: function(e) {
          console.log(e.length);

          if (e.length > 0) {
            console.log("1");
            var strAudio =
              "<audio id='audioPlay' src='http://mp3.9ku.com/mp3/553/552857.mp3' hidden='true'>";

            if ($("#audioPlay").length <= 0) {
              $("body").append(strAudio);
            }

            var audio = document.getElementById("audioPlay");

            //浏览器支持 audio
            audio.play();
            _self.time("未处理订单提示", "有" + e.length + "条订单未处理");
          }
        }.bind(_self)
      });
    },
    yfhOrder() {
      let _self = this;
      $.ajax({
        url: BASE_URL + "ordermanagement/cartByYFH",
        type: "get",
        data: {
          groupOrder: "",
          username: "",
          tel: "",
          date: ""
        },
        success: function(e) {
          console.log(e);
          _self.data6 = [];
          _self.data6 = e;
        }.bind(this)
      });
    },

    yshOrder() {
      let _self = this;
      $.ajax({
        url: BASE_URL + "ordermanagement/cartByYSH",
        type: "get",
        data: {
          groupOrder: "",
          username: "",
          tel: "",
          date: ""
        },
        success: function(e) {
          console.log(e);
          _self.data6 = [];
          _self.data6 = e;
        }.bind(this)
      });
    },
    click(e) {
      let _self = this;
      _self.tabsName = e;
      console.log(e);
      if (e == "name1") {
        _self.allOrders();
      }
      if (e == "name2") {
        _self.yfOrder();
      }
      if (e == "name3") {
        _self.yfhOrder();
      }
      if (e == "name4") {
        _self.yshOrder();
      }
    },
    handleAdd() {
      this.index++;
      this.formDynamic.items.push({
        value: "",
        index: this.index,
        status: 1
      });
    },
    ok() {
      // console.log(this.formValidate, this.formDynamic, this.list);
      this.modal2 = false;
      //   this.$Message.info("Clicked ok");
      //   this.data6.push({ name: this.value, spsl: "0" });
    },
    cancel() {
      this.$Message.info("Clicked cancel");
    },
    remove(index) {
      this.data6.splice(index, 1);
    },
    handleSubmit(name) {
      console.log(name);
      this.$refs[name].validate(valid => {
        if (valid) {
          this.$Message.success("Success!");
        } else {
          this.$Message.error("Fail!");
        }
      });
    },
    handleReset(name) {
      this.$refs[name].resetFields();
    }
  }
};
</script>

<style scoped>
.ivu-form-item {
  margin-bottom: 5px;
}
.ivu-form .ivu-form-item-label {
  color: #000000 !important;
}
</style>
